<!--
 * @Author: 凉月 1931226988@qq.com
 * @Date: 2023-08-22 15:30:25
 * @LastEditors: 凉月 1931226988@qq.com
 * @LastEditTime: 2023-08-23 16:16:08
 * @FilePath: \v3_xmly\src\views\rank\rankItem\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="rank_item">
    <div class="left">
        <slot></slot>
    </div>
    <div class="right">
      <img
        class="right_img"
        :src="'https://imagev2.xmcdn.com/' + data.cover"
        alt=""
      />
      <div class="right_center">
        <div class="title">{{ data.albumTitle }}</div>
        <div class="subtitle">{{ data.salePoint }}</div>
        <div class="right_bottom">
          <svg
            t="1692690546942"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8058"
            width="14"
            height="14"
          >
            <path
              d="M224 938.713333a53.58 53.58 0 0 1-53.333333-53.433333V138.72a53.333333 53.333333 0 0 1 80.886666-45.666667l618.666667 373.28a53.333333 53.333333 0 0 1 0 91.333334l-618.666667 373.28a53.16 53.16 0 0 1-27.553333 7.766666z m0.046667-810.666666a10.98 10.98 0 0 0-5.333334 1.42 10.466667 10.466667 0 0 0-5.38 9.253333v746.56a10.666667 10.666667 0 0 0 16.18 9.133333l618.666667-373.28a10.666667 10.666667 0 0 0 0-18.266666l-618.666667-373.28a10.386667 10.386667 0 0 0-5.446666-1.586667z"
              fill="#8a8a8a"
              p-id="8059"
            ></path>
          </svg>
          &nbsp;
          31.86亿
          &nbsp;
          &nbsp;
          <svg
            t="1692690673417"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9322"
            width="14"
            height="14"
          >
            <path
              d="M725.333333 298.666667v426.666666h-85.333333V298.666667h85.333333zM384 298.666667v426.666666H298.666667V298.666667h85.333333z m-170.666667 128v170.666666H128v-170.666666h85.333333z m682.666667 0v170.666666h-85.333333v-170.666666h85.333333z m-341.333333-256v682.666666h-85.333334V170.666667h85.333334z"
              fill="#8a8a8a"
              p-id="9323"
            ></path>
          </svg>
          &nbsp;
          144
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const props = defineProps(['data'])
</script>

<style scoped lang="less">
.rank_item {
  display: flex;
  font-size: 12px;
//   border: 1px solid red;
  .left {
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    flex: 1;
    // border: 1px solid pink;
  }
  .right {
    display: flex;
    flex: 8;
    padding: 10px 0;
    // border: 1px solid skyblue;
    border-bottom: 1px solid #eee;
    .right_img {
        margin-right: 15px;
      width: 70px;
      height: 70px;
    }
    .right_center {
        position: relative;
        .title {
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .subtitle {
            margin-top: 3px;
            font-size: 13px;
            color: #999;
        }
        .right_bottom {
          margin-top: 15px;
            // position: absolute;
            // bottom: 0;
            color: #999;
            display: flex;
            align-items: center;
        }
    }
  }
}
</style>
